<template>
    <div class="profile-container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>个人中心</span>
          </div>
        </template>
  
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本信息" name="info">
            <el-form :model="userInfo" :rules="infoRules" ref="infoForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="工号" prop="jobNumber">
                <el-input v-model="userInfo.jobNumber" disabled></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="userInfo.name"></el-input>
              </el-form-item>
              <el-form-item label="角色" prop="roleName">
                <el-input v-model="userInfo.roleName" disabled></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="userInfo.phone"></el-input>
              </el-form-item>
              <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="userInfo.createTime" disabled></el-input>
              </el-form-item>
              <el-form-item label="更新时间" prop="updateTime">
                <el-input v-model="userInfo.updateTime" disabled></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateInfo" class="action-button">保存修改</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
  
          <el-tab-pane label="修改密码" name="password">
            <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px" class="demo-ruleForm">
              <el-form-item label="原密码" prop="oldPassword">
                <el-input type="password" v-model="passwordForm.oldPassword" show-password></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="passwordForm.newPassword" show-password></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="password" v-model="passwordForm.confirmPassword" show-password></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="changePassword" class="action-button">修改密码</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getUserInfo, updateUserInfo, updatePassword } from '../api/user'
  import { useStore } from 'vuex'
  
  const store = useStore()
  const activeTab = ref('info')
  
  const userInfo = reactive({
    jobNumber: '',
    name: '',
    roleName: '',
    phone: '',
    createTime: '',
    updateTime: ''
  })
  
  const passwordForm = reactive({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
  
  const infoRules = {
    name: [
      { required: true, message: '请输入姓名', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    phone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ]
  }
  
  const passwordRules = {
    oldPassword: [
      { required: true, message: '请输入原密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    newPassword: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (value !== passwordForm.newPassword) {
            callback(new Error('两次输入密码不一致'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  }
  
  const infoForm = ref(null)
  const passwordFormRef = ref(null)
  
  onMounted(async () => {
    await fetchUserInfo()
  })
  
  const fetchUserInfo = async () => {
    try {
      const response = await getUserInfo()
      Object.assign(userInfo, response.data)
    } catch (error) {
      console.error('获取用户信息失败:', error)
      ElMessage.error(error.message || '获取用户信息失败')
    }
  }
  
  const updateInfo = async () => {
    try {
      const valid = await infoForm.value.validate()
      if (valid) {
        const { name, phone } = userInfo
        await updateUserInfo({ name, phone })
        await fetchUserInfo()
        ElMessage.success('信息更新成功')
      }
    } catch (error) {
      console.error('更新信息失败:', error)
      ElMessage.error(error.message || '更新信息失败')
    }
  }
  
  const changePassword = async () => {
    try {
      const valid = await passwordFormRef.value.validate()
      if (valid) {
        const { oldPassword, newPassword } = passwordForm
        await updatePassword({ oldPassword, newPassword })
        ElMessage.success('密码修改成功')
        passwordFormRef.value.resetFields()
      }
    } catch (error) {
      console.error('修改密码失败:', error)
      ElMessage.error(error.message || '修改密码失败')
    }
  }
  </script>
  
  <style scoped>
  .profile-container {
    padding: 20px;
  }
  
  .box-card {
    width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  
  .card-header {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  
  .demo-ruleForm {
    margin-top: 10px;
    width: 90%;
  }
  
  .action-button {
    width: 100%;
    background: linear-gradient(45deg, #0984e3, #74b9ff);
    color: white;
    border: none;
  }
  
  .action-button:hover {
    background: linear-gradient(45deg, #74b9ff, #0984e3);
  }
  </style>